import React from 'react';
import { GridContent } from '@ant-design/pro-layout';
import { Menu, Button } from 'antd';
import { connect } from 'dva';
import BaseView from './components/base';
import BindingView from './components/binding';
import NotificationView from './components/notification';
import SecurityView from './components/security';
import styles from './style.less';
import { meInfo } from '@/services/user';

const { Item } = Menu;

class AccountSettings extends React.Component {

    main = undefined;

    constructor(props) {
        super(props);
        const menuMap = {
            base: '基本信息',
            security: '密码设置',
            // binding: 'Account Binding',
            // notification: 'New Message Notification',
        };
        this.state = {
            mode: 'inline',
            menuMap,
            selectKey: 'base',
        };
    }

    componentDidMount() {
        // console.log('====>> this.props', this.props)
        const { dispatch } = this.props;
        // dispatch({
        //     type: 'accountSettings/fetchCurrent',
        // });
        // window.addEventListener('resize', this.resize);
        // this.resize();
    }

    // componentWillUnmount() {
    //     window.removeEventListener('resize', this.resize);
    // }

    getMenu = () => {
        const { menuMap } = this.state;
        return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
    };

    getRightTitle = () => {
        const { selectKey, menuMap } = this.state;
        return menuMap[selectKey];
    };

    selectKey = key => {
        this.setState({
            selectKey: key,
        });
    };

    renderChildren = () => {
        const { selectKey } = this.state;

        switch (selectKey) {
            case 'base':
                return <BaseView />;

            case 'security':
                return <SecurityView />;

            // case 'binding':
            //     return <BindingView />;

            // case 'notification':
            //     return <NotificationView />;

            default:
                break;
        }

        return null;
    };

    render() {
        const { currentUser } = this.props;

        if (!currentUser.userid) {
            return '';
        }

        const { mode, selectKey } = this.state;
        return (
            <GridContent>
                <Button onClick={() => {
                    meInfo().then(content => {
                        console.log("======>> content", content)
                        console.log("======>> headers", content.json())
                        // return content.json();
                    })
                }}>用户信息</Button>
                <div
                    className={styles.main}
                    ref={ref => {
                        if (ref) {
                            this.main = ref;
                        }
                    }}
                >
                    <div className={styles.leftMenu}>
                        <Menu mode={mode} selectedKeys={[selectKey]} onClick={({ key }) => this.selectKey(key)}>
                            {this.getMenu()}
                        </Menu>
                    </div>
                    <div className={styles.right}>
                        <div className={styles.title}>{this.getRightTitle()}</div>
                        {this.renderChildren()}
                    </div>
                </div>
            </GridContent>
        );
    }

}

export default connect(({ accountSettings, user, loading }) => ({
    currentUser: user.currentUser,
}))(AccountSettings);